<template>
    <!--查询结果的列表-->
    <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border style="width: 100%;height:86%"
        :cell-style="tableStyle.cellStyle" stripe :header-cell-style="tableStyle.headerCellStyle">
        <el-table-column prop="salesOrderCode" :label="$t('dailyDeliveryData.salesOrderCode')" />
        <el-table-column prop="dnCode" :label="$t('dailyDeliveryData.dnCode')" />
        <el-table-column prop="dnLine" :label="$t('dailyDeliveryData.dnLine')" width="115px" />
        <el-table-column prop="materialCode" :label="$t('dailyDeliveryData.materialCode')" width="100px" />
        <el-table-column prop="materialName" :label="$t('dailyDeliveryData.materialName')" />
        <el-table-column prop="spec" :label="$t('dailyDeliveryData.spec')" width="320px" />
        <el-table-column prop="deliveryDate" :label="$t('dailyDeliveryData.deliveryDate')" />v
        <el-table-column prop="shippedDate" :label="$t('dailyDeliveryData.shippedDate')" />
        <el-table-column prop="saleQty" :label="$t('dailyDeliveryData.saleQty')" width="90px">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" type="">
                    {{ scope.row.saleQty }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="scanQty" :label="$t('dailyDeliveryData.scanQty')" width="90px">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" type="success">
                    {{ scope.row.scanQty }}
                </el-tag>
            </template>
        </el-table-column>
      <el-table-column prop="baseQty" :label="$t('dailyDeliveryData.unShippedQty')" width="90px">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
              <el-tag size="large" type="warning">
                {{ scope.row.baseQty }}
                </el-tag>
            </template>
        </el-table-column>
      <el-table-column prop="closeStatus" :label="$t('dailyDeliveryData.closeStatus')" width="90px">
        <template #default="scope">
          <!--根据不同的状态选择不同的颜色的tag-->
          <el-tag size="large" :type="scope.row.closeStatus === 'A' ? 'success' : 'danger'">
            {{ scope.row.closeStatus }}
          </el-tag>
        </template>
      </el-table-column>
        <el-table-column prop="delayDays" :label="$t('dailyDeliveryData.delayDays')" width="90px">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
              <el-tag size="large" :type="scope.row.delayDays === '正常' ? 'info' : 'danger'">
                    {{ scope.row.delayDays }}
                </el-tag>
            </template>
        </el-table-column>
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" style="margin-top: 3px !important;"/>
</template>

<script setup lang="ts">
import {reactive} from 'vue';
import {BasicTableProps, useTable} from "/@/hooks/table";
import {getDeliveryNoticeList} from "/@/api/platform/report/dailyDeliveryData"
import {useI18n} from 'vue-i18n';

const { t } = useI18n();

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getDeliveryNoticeList
})

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)

</script>
